import { Layout, Button, Menu, Select } from 'antd';
import { Link, Outlet } from 'umi';
import './index.less'
import React, { useState } from 'react'
import type { MenuProps } from 'antd';
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
const { Option } = Select

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  key: React.Key,
  label: React.ReactNode,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}
const items: MenuItem[] = [
  getItem('系统首页', <Link to='/home/system'>系统首页</Link>, <PieChartOutlined />),
  getItem('凭证管理', <Link to='/home/proof'>凭证管理</Link>, <DesktopOutlined />, [
    getItem('查看凭证', <Link to='/home/proof'>查看凭证</Link>, <DesktopOutlined />),
    getItem('新增凭证', <Link to='proof/newProof'>新增凭证</Link>, <DesktopOutlined />),
    getItem('复制凭证', <Link to='proof/copyProof'>复制凭证</Link>, <DesktopOutlined />),
    getItem('审核凭证', <Link to='proof/checkProof'>审核凭证</Link>, <DesktopOutlined />),
    getItem('反审核凭证', <Link to='proof/offCProof'>反审核凭证</Link>, <DesktopOutlined />),
    getItem('查看凭证-已结账', <Link to='proof/finishProof'>查看凭证-已结账</Link>, <DesktopOutlined />),
    getItem('冲红凭证', <Link to='proof/redProof'>冲红凭证</Link>, <DesktopOutlined />),
    getItem('期末结转', <Link to='proof/endProof'>期末结转</Link>, <DesktopOutlined />),
  ]),
  getItem('资金管理', <Link style={{ color: 'white' }} to='financial/cash'>资金管理</Link>, <ContainerOutlined />, [
    getItem('现金日记账', <Link to='financial/cash/?id=0'>现金日记账</Link>),
    getItem('银行日记账', <Link to='financial/bank/?id=1'>银行日记账</Link>),
    getItem('内部转账', <Link to='financial/internal'>内部转账</Link>),
    getItem('核对总账', <Link to='financial/general'>核对总账</Link>),
    getItem('资金报表', <Link to='financial/report'>资金报表</Link>),
    getItem('付款查询', <Link to='financial/payment'>付款查询</Link>),
    getItem('收款查询', <Link to='financial/collection'>收款查询</Link>),
  ]),
  getItem('账簿管理', <Link style={{ color: 'white' }} to='/home/ledger/FinancialGeneral'>账簿管理</Link>, <MailOutlined />, [
    getItem('财务总账', <Link to='ledger/FinancialGeneral'>财务总账</Link>),
    getItem('明细账', <Link to='ledger/detail'>明细账</Link>),
    getItem('科目余额表', <Link to='ledger/subbalance'>科目余额表</Link>),
    getItem('项目余额表', <Link to='ledger/projbalance'>项目余额表</Link>),
  ]),
  getItem('财务报表', <Link style={{ color: 'white' }} to='/home/statement/balanceSheet'>财务报表</Link>, <AppstoreOutlined />, [
    getItem('资产负债表', <Link to='statement/balanceSheet'>资产负债表</Link>),
    getItem('利润表', <Link to='statement/profit'>利润表</Link>),
    getItem('现金流量表', <Link to='statement/cashFlow'>现金流量表</Link>),
  ]),
  getItem('系统设置', <Link style={{ color: 'white' }} to='/home/settings'>系统设置</Link>, <AppstoreOutlined />, [
    getItem('账套管理', <Link to='settings/set' >账套管理</Link>),
    getItem('科目管理', <Link to='settings/subject'>科目管理</Link>),
    getItem('期初余额设置', <Link to='settings/surplus'>期初余额设置</Link>),
    getItem('凭证字设置', <Link to='settings/voucher'>凭证字设置</Link>),
    getItem('辅助设置', <Link to='settings/auxiliary '>辅助设置</Link>),
    getItem('凭证模板', <Link to='settings/voucherTemplate'>凭证模板</Link>),
    getItem('操作日志', <Link to='settings/journal'>操作日志</Link>),
    getItem('权限设置', <Link to='settings/power'>权限设置</Link>),
  ])
]
const { Header, Sider, Content } = Layout;
const headerStyle: React.CSSProperties = {
  color: 'black',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: 'white',
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#000',
  backgroundColor: '#eee',
  height: '100%'
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: 'black',
};

export default function Layout1() {
  const [collapsed, setCollapsed] = useState(false);
  const [a, setA] = useState('');

  const fn = (v: any) => {
    setA(v.key)
    // console.log(v);

  }
  return (

    <div className='all'>
      <Layout >
        <Sider style={siderStyle}>
          <div style={{ width: 200 }} className='nav'>
            <h2 className='title'>财务出纳管理系统</h2>
            <Menu
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              mode="inline"
              theme="dark"
              // inlineCollapsed={collapsed}
              items={items}
              onClick={fn}
            />
          </div>
        </Sider>
        <Layout style={{ height: 100 }}>
          <Header style={headerStyle}>
            <Select
              placeholder="请选择公司" style={{ width: 200 }}
            >
              <Option value="某公司1">某公司1</Option>
              <Option value="某公司2">某公司2</Option>
              <Option value="某公司3">某公司3</Option>
            </Select>
            <span>2023年1月</span>
          </Header>
          <Content style={contentStyle}>
            <div className='Mainhome'>
              <Outlet />
            </div>
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}
